.marknote {
    box-sizing: border-box;
    outline: none;
    // margin: 1rem 0;
    padding: 1rem 4rem;
    font-family: var(--fontFamily);
    color: var(--contentTextColor);
    background-color: var(--contentBackgroundColor);
    --editorHighlightBackgroundColor:var(--contentBackgroundColorActive);
    --editorHighlightTextColor:var(--contentTextColorActive);
    &.resize-cursor{
        cursor:col-resize;
    }

    // .is-empty{
    //     position: relative;
    //     &::before{
    //         content: attr(data-placeholder);
    //         color: #0377fb5e;
    //         position: absolute;
    //         top: 0;
    //         left: 0;
    //     }
    // }

    p .marknote-image{
        display: inline-block;
        margin-left: .25em;
    }

    &>.has-focus{
        .katex-display .katex-content{
            padding: .4em;
            border: 1px solid var(--contentTextColorActive);
        }
        
    }

    >*+* {
        margin-top: 0.75em;
    }

    a{
        color:var(--primaryTextColor,#00c4ff);
    }

    

    .bold-wrapper,.code-wrapper,.strike-wrapper,.italic-wrapper,.link-wrapper,.mark-wrapper{
        color:var(--editorEchoTextColor,#ccc);
        user-select: none;
        -webkit-user-select: none;
    }

    ul,
    ol {
        padding: 0 1rem;
    }
    ul{
        margin-left: .3em;
        
    }
    ol{
        margin-left: 0.5em;
    }

    @for $i from 1 through 6{
        &>h#{$i}{
            line-height: 1.1;
            position: relative;
            &::before{
                content: 'H#{$i}';
                display: block;
                position: absolute;
                top: 0;
                left: -22px;
                font-size: .4em;
                color: #abaeb1;
            }
        }
    }

    // h1,
    // h2,
    // h3,
    // h4,
    // h5,
    // h6 {
    //     line-height: 1.1;
    // }

    pre {
        border:1px solid var(--contentBorderColor);
        border-radius: 4px;
    }

    code.inline {
        // background-color: rgba(#616161, 0.1);
        background-color:var(--editorHighlightBackgroundColor,#f1f3f5);
        color: var(--editorHighlightTextColor,#616161);
        padding: 0.2em 0.4em;
        margin: 0 0.2em;
        white-space: break-spaces;
        border-radius: 4px;
        font-size: 70%;
        // font-family: 'JetBrainsMono', monospace;
        
    }
    code{
        font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    blockquote {
        box-sizing: border-box;
        margin-top: 0.75em !important;
        padding:0 1em;
        margin: 0;
        border-left: 0.25em solid var(--contentBorderColor,#1b3954);
        // background-color: var(--editorHighlightBackgroundColor,#f1f3f5);
        // border-top-right-radius: 0.5rem; 
        // border-bottom-right-radius: 0.5rem;
        p{
            box-sizing: border-box;
            margin: 0;
            padding: .4em;
        }
    }

    hr {
        border: none;
        border-top: 2px solid var(--contentBorderColor);
        margin: 2rem 0;
    }
    // .tableWrapper>.scrollWrapper{
    //     width: 100%;
    //     overflow-x: auto;
    //     overflow-y: hidden;
    // }

    table {
        border-collapse: collapse;
        table-layout: fixed;
        // position: relative;
        width: 100%;
        margin: 0;
        --gripWidth: 4px;
        --gripColor:var(--contentBorderColor,#f1f3f5);
        --gripColorActive: var(--contentTextColorHover,#616161);

        .grip-table,.grip-row,.grip-column{
            display: inline-block;
            position: absolute;
            cursor: pointer;
            &.selected{
                background-color: var(--gripColorActive);
            }
        }
        .grip-table{
            // top: calc(0px - (var(--gripWidth) + 2px));
            // left:  calc(0px - (var(--gripWidth) + 2px));
            top:0px;
            left: 0px;
            z-index: 2;
            width: var(--gripWidth);
            height: var(--gripWidth);
            background-color: var(--gripColor);
        }
        .grip-row{
            top: 0;
            // left: calc(0px - (var(--gripWidth) + 2px));
            left:0px;
            width: var(--gripWidth);
            height: 100%;
            background-color:var(--gripColor);
            &.first{
                top: 2px;
                height: calc(100% - var(--gripWidth) / 2);
            }
        }
        .grip-column{
            // top: calc(0px - (var(--gripWidth) + 2px));
            top:0px;
            left: 0;
            width: 100%;
            height: var(--gripWidth);
            background-color: var(--gripColor);
            &.first{
                left: 2px;
                width: calc(100% - var(--gripWidth) / 2);
            }
        }

        td,
        th {
            min-width: 1em;
            border: 1px solid var(--contentBackgroundColorActive,#ced4da);
            padding: 3px 5px;
            vertical-align: top;
            box-sizing: border-box;
            position: relative;

            >* {
                margin-bottom: 0;
            }
        }

        th {
            font-weight: bold;
            text-align: left;
            background-color:var(--editorHighlightBackgroundColor,#f1f3f5);
            color: var(--editorHighlightTextColor,#616161);
        }

        .selectedCell:after {
            z-index: 2;
            position: absolute;
            content: "";
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background: rgba(200, 200, 255, 0.4);
            pointer-events: none;
        }

        .column-resize-handle {
            position: absolute;
            right: -2px;
            top: 0;
            bottom: -2px;
            width: 4px;
            background-color: #adf;
            pointer-events: none;
        }

        p {
            margin: 0;
        }
    }

    ul[data-type="taskList"] {
        list-style: none;
        padding: 0;
        padding-left: .2rem;
        margin: 0;
        --bgColor:#0375FB;
        --borderColor: #fff;
        p {
            margin: 0;
        }

        li {
            display: flex;
            padding: 0.2em 0;
            >label {
                flex: 0 0 auto;
                margin-right: 0.5rem;
                user-select: none;
                cursor: pointer;
                position: relative;
                width: 14px;
                height: 14px;
                border: 2px solid var(--bgColor);
                // border-radius: 50%;
                input[type="checkbox"]{
                    opacity: 0;
                    &:checked+span{
                        width: 14px;
                        height: 14px;
                        display: inline-block;
                        position: absolute;
                        left: 0;
                        top: 0;
                        background-color: var(--bgColor);
                        &::after{
                            content: '';
                            display: inline-block;
                            width: 5px;
                            height: 10px;
                            border-top: 2px solid var(--borderColor);
                            border-left: 2px solid var(--borderColor);
                            background-color: var(--bgColor);
                            transform: rotate(230deg);
                            position: absolute;
                            left: 3px;
                            top: -1px;
                        }
                    }
                }
            }

            >div {
                flex: 1 1 auto;
            }

            ul li,
            ol li {
                display: list-item;
            }

            ul[data-type="taskList"]>li {
                display: flex;
                
            }
        }
    }
    

}

.table-cell-tooltip{
    // position: fixed;
    // top: var(--tooltipTop);
    // left: var(--tooltipLeft);
    
    display: flex;
    flex-direction: column;
    &>div,button{
        cursor: pointer;
        pointer-events: all; 
        &:hover{
            background-color: #868b92;
        }
    }
}

.tableWrapper{
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    box-sizing: border-box;
    &.has-focus{
        // padding: 12px 0 0 12px;
    }
    table{
        tr:first-child{
            font-weight: bold;
            text-align: left;
            background-color: #f1f3f5;
        }
    }
}